<template>
  <div class="index">
      <div class="wrap">
          <div class="crumbs flex">
            <router-link to="/" class="p">首页</router-link>
            <router-link class="p" :to="parent.path" v-if="parent.meta">>{{ parent.meta.title }}</router-link>
            <div class="p">>{{title}}</div>
          </div>
          <div class="service-title">
              <h2>服务联盟</h2>
              <p>Service Alliance</p>
          </div>
          <div class="nav flex-jus">
            <li @click="togNav('/service')">服务商超</li>
            <li class="on" @click="togNav('/service/product')">人才服务</li>
            <li @click="togNav('/service/enterprise')">企业大学</li>
            <li @click="togNav('/service/activity')">活动</li>
          </div>
          <div class="product-list flex flex-wrap">
            <div class="flex-itemx">
              <div class="flex-item-left">
                <img src="../../assets/service/Personal.jpg" alt="" style="width:130px;htight:130px;cursor:pointer;" @click="linkto(1)">
              </div>
              <div class="flex-item-right">
                <div class="pre" @click="preclick" @mouseover="changeActive1($event)" @mouseout="removeActive1($event)">
                  <span class="el-icon-arrow-left"></span>
                </div>
                <div class="flex-item-content">
                  <ul :style="{ left:left + 'px'}">
                    <li v-for="(item,index) in personalList" :key="index" @click="linkto(item.link)">
                      <div>
                        <img :src="item.imgurl" alt="">
                      </div>
                      <span>{{item.name}}</span>
                    </li>
                  </ul>
                </div>
                <div class="next"  @click="nextclick" @mouseover="changeActive1($event)" @mouseout="removeActive1($event)">
                  <span class="el-icon-arrow-right"></span>
                </div>
              </div>
            </div>
            <div class="flex-itemx">
              <div class="flex-item-left">
                <img src="../../assets/service/Enterprise.jpg" alt="" style="width:130px;htight:130px;cursor:pointer;" @click="linkto(2)">
              </div>
              <div class="flex-item-right">
                <div class="pre" @click="preclick2" @mouseover="changeActive2($event)" @mouseout="removeActive2($event)">
                  <span class="el-icon-arrow-left"></span>
                </div>
                <div class="flex-item-content content2">
                  <ul :style="{ left:left2 + 'px' }">
                    <li v-for="(item,index) in enterpriseList" :key="index" @click="linkto(item.link)">
                      <div>
                        <img :src="item.imgurl" alt="">
                      </div>
                      <span>{{item.name}}</span>
                    </li>
                  </ul>
                </div>
                <div class="next"  @click="nextclick2" @mouseover="changeActive2($event)" @mouseout="removeActive2($event)">
                  <span class="el-icon-arrow-right"></span>
                </div>
              </div>
            </div>
            <div class="flex-wrap-item">
            </div>
          </div>
      </div>
      <serviceBox></serviceBox>
      <serviceLogo></serviceLogo>
  </div>
</template>
<script>
import serviceBox from '@/views/components/service/service-box'
import serviceLogo from '@/views/components/service/service-logo'
import {findAllLista} from '@/api/service/service'
export default {
  name: "index",
  data() {
    return {
        parent:{},                      //获取父路由信息
        title:"",
        img:require("../../assets/image/profile.jpg"),
        left:0,
        left2:0,
        req: {
            limit: 6,
            page: 1,
            bigCategory:9
        },
        personalList:[
          {
            name:'创业指导',
            imgurl:require("../../assets/service/personalList/1.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=1561CDFAB0999FEC4716A9A1EAC01A12&infoType=1'
          },
          {
            name:'求职登记',
            imgurl:require("../../assets/service/personalList/2.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=C9BBB9420203AC08B4A47EE3FECAEB06&infoType=1'
          },
          {
            name:'社保补贴',
            imgurl:require("../../assets/service/personalList/3.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=C9BBB9420203AC08B4A47EE3FECAEB06&infoType=1'
          },
          {
            name:'失业登记',
            imgurl:require("../../assets/service/personalList/4.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=EBB7E5968120721817AA8CDF5E51FA5E&infoType=1'
          },
          {
            name:'社保变更',
            imgurl:require("../../assets/service/personalList/5.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=F6E2E2C3E8F66B737B2E973D923C195D&infoType=1'
          },
          {
            name:'退休办理',
            imgurl:require("../../assets/service/personalList/6.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=85F80F9E70F3ED3696C7C06A49021DD0&infoType=1'
          },
          {
            name:'公积金提取',
            imgurl:require("../../assets/service/personalList/7.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=99285814941C0344B991A096A37A26A1&infoType=1'
          },
          {
            name:'就业创业证',
            imgurl:require("../../assets/service/personalList/8.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=FA396FF1F09E29319E66A6CF60202CD9&infoType=1'
          },
          {
            name:'不动产登记',
            imgurl:require("../../assets/service/personalList/9.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=86107439502E297D8938F32ACB21366E&infoType=1'
          },
          {
            name:'生育津贴',
            imgurl:require("../../assets/service/personalList/10.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=78B9556B37012C7930761FF5F267B267&infoType=1'
          },
        ],
        enterpriseList:[
          {
            name:'高企认定',
            imgurl:require("../../assets/service/enterpriseList/1.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=3E03FB85DD1616E8C3D6E457878C7566&infoType=1'
          },
          {
            name:'单位参保',
            imgurl:require("../../assets/service/enterpriseList/2.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=99F650ADBD5734871410AC077700A3D2&infoType=1'
          },
          {
            name:'就业登记',
            imgurl:require("../../assets/service/enterpriseList/3.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=3F06C18220493A3FFB320293306F3ADF&infoType=1'
          },
          {
            name:'知识产权',
            imgurl:require("../../assets/service/enterpriseList/4.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=7CD4EF28F5B93FC01FA49BE0D629D6C5&infoType=1'
          },
          {
            name:'设立变更',
            imgurl:require("../../assets/service/enterpriseList/5.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=2DD7544F089C654A315E122FE9F691E4&infoType=1'
          },
          {
            name:'小巨人认定',
            imgurl:require("../../assets/service/enterpriseList/6.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=C2C0566890F3A8891AA8159D58D07E5F&infoType=1'
          },
          {
            name:'孵化器认定',
            imgurl:require("../../assets/service/enterpriseList/7.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=848279D391DDDDE5057DEC6E4841275C&infoType=1'
          },
          {
            name:'企业迁入',
            imgurl:require("../../assets/service/enterpriseList/8.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=F4BE3145182A0AF9A53981229382B9B5&infoType=1'
          },
          {
            name:'企业投资',
            imgurl:require("../../assets/service/enterpriseList/9.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=BCA3EEEE2C5B8907442B5C045C268C9B&infoType=1'
          },
          {
            name:'用工奖励',
            imgurl:require("../../assets/service/enterpriseList/10.png"),
            link:'http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=B4DA240E2B38891C73EB4CC4C345F24E&infoType=1'
          },
          
        ],
        list:[],
        route:{},                         //路由字段
        timeletf:null,
        timeletf2:null
    }
  },
  components:{serviceBox,serviceLogo},
  created() {
    this.findAllListapi()
  },
  mounted(){
    this.route = this.$route;
    this.parent = this.$route.matched[0];
    this.title = this.$route.meta.title;
    this.timeletf = setInterval(() => {
      this.nextclick()
    }, 3000);
    this.timeletf2 = setInterval(() => {
      this.nextclick2()
    }, 3000);
  },
  methods:{
    changeActive1(item){
      clearInterval(this.timeletf);
    },
    removeActive1(){
      this.timeletf = setInterval(() => {
        this.nextclick()
      }, 3000);
    },
    changeActive2(item){
      clearInterval(this.timeletf2);
    },
    removeActive2(){
      this.timeletf = setInterval(() => {
        this.nextclick2()
      }, 3000);
    },
    // 跳转
    linkto(linkurl){
      if(linkurl == 1){
        window.open('http://xm.zwfw.fujian.gov.cn/person-todo/todo-fingerpost?unid=1561CDFAB0999FEC4716A9A1EAC01A12&infoType=1')
      }else if(linkurl == 2){
        window.open('http://xm.zwfw.fujian.gov.cn/faren-todo/index?userType=2')
      }else{
        window.open(linkurl)
      }
    },
    // 向左
    preclick(){
      if(this.left < 0 ){
        this.left = this.left + 130
      }
      
    },
    preclick2(){
      if(this.left2 < 0 ){
        this.left2 = this.left2 + 130
      }
      
    },
    // 向右
    nextclick(){
      this.left -=130
      if(this.left == -650){
        this.left = 0
      }
    },
    nextclick2(){
      this.left2 -=130
      if(this.left2 == -650){
        this.left2 = 0
      }
    },
    togNav(e){
      this.$router.push(e)
    },
    findAllListapi(){
      findAllLista(this.req).then(res=>{
        if(res.code === 0){
          this.list = res.data;
        }
      })
    }
  }
}
</script>
<style scoped>
/* bin修改 */
.flex-itemx{
  width: 1120px;
  margin: 0 auto;
  margin-bottom:30px;
  display:flex;
  align-items: center;
  justify-content: space-between;
}
.flex-item-right{
  width: 960px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-item-content{
  position: relative;
  width: 840px;
  height: 130px;
  overflow: hidden;
  background: #fff6f7;
}

.flex-item-content ul{
  position: absolute;
  transition: left .8s;
  -webkit-transition: left .8s; /* Safari */
  width: 1300px;
  display: flex;
}
.flex-item-content li{
  width: 130px;
  height: 130px;
  color: #ff6363;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.flex-item-content li div{
  width: 130px;
  height: 60px;
  text-align: center;
}
.flex-item-content li img{
  height: 40px;
}
.content2 li:first-child img{
  width: 60px;
}
.content2 li:nth-child(2) img,.content2 li:nth-child(3) img,.content2 li:nth-child(4) img{
  height: 45px;
}

.content2{
  background: #f6faff;
}
.content2 li{
  color: #27bdfb;
}
.flex-item-content li:hover{
  color: #ff6363;
  font-weight: 600;
}
.content2 li:hover{
  color: #27bdfb;
}
.flex-item-content li:hover img{
  transform:rotateY(360deg);
  transition: transform .5s;
  -webkit-transition: transform .5s; /* Safari */
}
.pre,.next{
  width: 30px;
  height: 90px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.pre:hover,.next:hover{
  background-color: rgba(0, 0, 0, 0.8);
}
/* bin修改结束 */
.index{
  background: #fff;
}
.crumbs{
    padding: 10px 0;
}
.crumbs .p{
    font-size: 14px;
}
.service-title{
  padding: 36px 0;
  text-align: center;
  color: #5E9F8E;
}
.service-title h2{
  font-size: 36px;
  line-height: 52px;
}
.service-title p{
  font-size: 14px;
  line-height: 24px;
  text-transform:uppercase;
}
.nav {
  padding: 25px 0;
}
.nav li{
  font-size: 16px;
  color: #343434;
  line-height: 20px;
  padding: 0 15px;
  cursor:pointer;
  transition:all .5s;
}
.nav li.on{
  color: #CE3A5C;
}
.nav li:hover{
  color: #CE3A5C;
}
.product-list{
  padding: 30px 0 40px 0;
}
.product-list .product-li{
  padding: 10px;
}
.product-list .product-li .img{
  width: 100px;
  height: 100px;
  border-radius: 5px;
}
.product-list .product-li p{
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #333;
}
.product-list::after{
  content: " ";
  display: block;
  width: 377px;
  height: 0;
}
</style>
<style>
.service-title{
  padding: 36px 0;
  text-align: center;
  color: #5E9F8E;
}
.service-title h2{
  font-size: 36px;
  line-height: 52px;
}
.service-title p{
  font-size: 14px;
  line-height: 24px;
  text-transform:uppercase;
}
</style>